<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
<title></title>
</head>
<body>

<button id="test1">jQuery的querySelectorAll的处理</button>
<button id="test2">模拟jQuery的querySelectorAll的处理</button>

<div class= "aaron">
     <p><span>慕课网</span></p>
     <div class="text">Aaron</div>
</div>

<script type="text/javascript">


  $('#test1').click(function() {
    var a = $(".aaron");
    alert(a.find('.aaron span').length)
  })


  $('#test2').click(function() {
    var context = document.querySelector('.aaron');
    var old;
    var nid = Math.random();

    //是否有ID/'|\\/g
    if ((old = context.getAttribute("id"))) {
      nid = old.replace(/'|\\/g, "\\$&");
    } else {
      context.setAttribute("id", nid);
    }
    nid = "[id='" + nid + "'] ";

    var newSelector =  nid + '.aaron span';

    if (newSelector) {
      try {
        alert(context.querySelectorAll(newSelector).length)
      } catch (qsaError) {} finally {
        //如果是通过增加的范围，则要删除
        if (!old) {
          context.removeAttribute("id");
        }
      }
    }
  })





</script> 

</body>
</html>















